<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
    <title>数据展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/pc/css/common.css" />
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/pc/css/index.css" />
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/pc/css/swiper-4.3.3.min.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/pc/js/jquery.1.9.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/pc/js/echarts.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/pc/js/echarts-gl.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/pc/js/swiper-4.3.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/pc/layer/layer.js"></script>

</head>

<body class="" style="background:url(${pageContext.request.contextPath}/static/pc/images/bg.png) no-repeat;background-size:cover;-moz-background-size:cover;">
<form:form id="inputForm" modelAttribute="devStation" class="form-horizontal">
<form:hidden path="id" id="localeId"/>

</form:form>
<input type="hidden" id="ctx" value="${ctx}">
<!--头部-->
<div class="tile">
    <div class="caption-title clearfix">
        <!--<i class="title-left">-->
        <img src="${pageContext.request.contextPath}/static/pc/images/left-logo.png" />
        <!-- </i>-->
        <!--<p class="title-left-title-font">建设工程地下水智能监控系统</p>-->
        <img src="${pageContext.request.contextPath}/static/pc/images/title.png" style="width: 30%;padding: 0 29px;"/>
        <!--<i class="title-left">-->
        <img src="${pageContext.request.contextPath}/static/pc/images/right-logo.png" />
        <!-- </i>-->
    </div>
</div>
<!--主体-->
<div id="displayMain" class="content">
    <div class="main-left">
        <div class="left-content">
            <ul class="left-content-ul">
                <li style="margin-top: 55px;">系统说明</li>
                <li>工程概况</li>
                <li>地下水监测</li>
                <li>运行管理</li>
                <li>风险控制</li>
                <li>安全生产</li>
            </ul>
        </div>
    </div>
    <div class="right">
        <div class="right-content-title">气象监控</div>
        <div class="right-content">

            <ul class="right-content-ul">
                <li>
                    <div class="right-li-img"><img src="${pageContext.request.contextPath}/static/pc/images/tmp/temperature.png"></div>
                    <div class="right-li-title">温度:</div>
                    <div class="right-data temperature"></div>
                </li>
                <li>
                    <div class="right-li-img"><img src="${pageContext.request.contextPath}/static/pc/images/tmp/humidity.png"></div>
                    <div class="right-li-title">湿度:</div>
                    <div class="right-data humidity"></div>
                </li>
                <li>
                    <div class="right-li-img"><img src="${pageContext.request.contextPath}/static/pc/images/tmp/wind_ direction.png"></div>
                    <div class="right-li-title">风向:</div>
                    <div class="right-data wind"></div>
                </li>
                <li>
                    <div class="right-li-img"><img src="${pageContext.request.contextPath}/static/pc/images/tmp/wind_speed.png"></div>
                    <div class="right-li-title">风速:</div>
                    <div class="right-data speed"></div>
                </li>
                <li>
                    <div class="right-li-img"><img src="${pageContext.request.contextPath}/static/pc/images/tmp/noise.png"></div>
                    <div class="right-li-title">噪音:</div>
                    <div class="right-data noise"></div>
                </li>
                <li>
                    <div class="right-li-img"><img src="${pageContext.request.contextPath}/static/pc/images/tmp/pressure.png"></div>
                    <div class="right-li-title">气压:</div>
                    <div class="right-data pressure"></div>
                </li>
                <li>
                    <div class="right-li-img"><img src="${pageContext.request.contextPath}/static/pc/images/tmp/pm25.png"></div>
                    <div class="right-li-title">pm2.5:</div>
                    <div class="right-data pm25" style="font-size: 20px"></div>
                </li>
                <li>
                    <div class="right-li-img"><img src="${pageContext.request.contextPath}/static/pc/images/tmp/pm10.png"></div>
                    <div class="right-li-title">pm 10:</div>
                    <div class="right-data pm10" style="font-size: 20px"></div>
                </li>
            </ul>

        </div>
        <div class="right-content-tmp"></div>
    </div>
    <div class="main">
        <!--基坑环境图-->
        <div class="big-layer data-jk">
            <div class="main-data-title">
                基坑周边环境简图
            </div>
            <div id="data-jk" style="margin-left:10px;margin-right:10px;margin-top:10px;overflow: hidden">
               <%-- <img src="${pageContext.request.contextPath}/static/pc/images/tmp/jk.png" width="100%"  />--%>
                <img src="#" width="100%"  />
            </div>
        </div>
        <!--水文地质图-->
        <div class="big-layer data-sw">
            <div class="main-data-title">
                水文地质剖面图
            </div>
            <div id="data-sw" style="margin-left:20px;margin-right:20px;margin-top:10px;overflow: hidden">
               <%-- <img src="${pageContext.request.contextPath}/static/pc/images/tmp/sw.png" width="100%" />--%>
                   <img src="#" width="100%" />
            </div>
        </div>
        <!--水位监测图-->
        <div class="big-layer data-swjk">
            <div class="main-data-title">
                水位波形图
            </div>
            <div id="data-swjk" class="chart-data">

            </div>
        </div>
        <!--3d数据变换-->
        <div class="big-layer data-3d">
            <div class="main-data-title">
                水位3D图
            </div>
            <div id="data-3d" class="chart-data">

            </div>
        </div>

        <!--水井数据-->
        <div class="data-sj">
            <div class="swiper-container">
                <ul class="swiper-wrapper data-sj-ul">
                    <div class="swiper-slide">
                       <%-- <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">1#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>

                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">2#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">3#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">4#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">5#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">6#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">7#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">8#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">9#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">10#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">11#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>
                    <div class="swiper-slide">
                        <li>
                            <div class="data-sj-content">
                                <div class="data-sj-content-head">12#水位</div>
                                <div class="data-sj-content-cycle-num"><em>6.714</em>m</div>
                            </div>
                        </li>
                    </div>--%>
                    <!--<li>
                    <!--<li>
                        <div class="data-sj-content">
                            <div class="data-sj-content-in">
                                <div class="data-sj-content-title">SAFE</div>
                                <div class="data-sj-content-cycle">
                                    <div class="data-sj-content-cycle1">
                                        <div class="data-sj-content-cycle2">
                                            <div class="data-sj-content-cycle-data">3井</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="data-sj-content-input"></div>
                            </div>

                        </div>
                    </li>
                    <li>
                        <div class="data-sj-content">
                            <div class="data-sj-content-in">
                                <div class="data-sj-content-title">SAFE</div>
                                <div class="data-sj-content-cycle">
                                    <div class="data-sj-content-cycle1">
                                        <div class="data-sj-content-cycle2">
                                            <div class="data-sj-content-cycle-data">4井</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="data-sj-content-input"></div>
                            </div>

                        </div>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div id="leftbig"></div>
</div>

</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/pc/js/business/index.js"></script>
</html>